<template>
  <common-page class="detail-view-container" title="报表详情">
    <el-button slot="header" @click="back">返回</el-button>

    <div class="report-edit-wrap" slot="content">
      <gridEchart ref="gridEchart" :boxList="boxList" :draggable="false" :resizable="false" :del="false"/>
    </div>
  </common-page>
</template>

<script>
import gridEchart from '@/components/gridEchart'
import { report_getComponent } from '@/api/management/echart/report-config'

export default {
  components: { gridEchart },
  props: {},
  data() {
    return {
      boxList: [],
      title: '',
      period: null,// 时间周期
    }
  },
  watch: {},
  computed: {},
  methods: {
    back() {
      this.$emit('back')
    },
    show(data) {
      this.period = data.timeinterval
      this.$nextTick(() => {
        this.boxList = data.subjectComponentVoList.reduce((r, c, index) => {
          let key = `${new Date().getTime()}_${index}`
          r.push({
            key: key,
            name: '',
            x: c.x,
            y: c.y,
            w: c.w,
            h: c.h,
            i: c.componentId,
            isLoading: true,
            isError: false,
            option: null
          })
          return r
        }, [])
        this.handleData()
      })
    },
    handleData() {
      this.boxList.forEach(item => {
        this.getChartData(item.i).then(({ opt, name }) => {
          item.option = opt
          item.name = name
          item.isLoading = false
          item.key = `${item.i}_${new Date().getTime()}`
        }).catch(err => {
          item.isError = true
          item.isLoading = false
          item.key = `${item.i}_${new Date().getTime()}`
        })
      })
    },
    getChartData(id) {
      return new Promise((resolve, reject) => {
        report_getComponent({
          componentId: id,
          timeinterval: this.period
        }).then(res => {
          if (res && res.code === 200) {
            let option, mapper
            let { name } = res.component

            let { list } = res.data

            let configStr = res.component.parameter
            let optionStr = res.component.echart.parameter

            try {
              let config = JSON.parse(configStr)
              mapper = config.mapper
            } catch (e) {
              console.err('配置项转换异常: ', e)
            }

            try {
              option = JSON.parse(optionStr)
            } catch (e) {
              console.err('option转换异常: ', e)
            }

            if (list && option && mapper) {
              let fullOption = this.handleOption(list, option, mapper)
              resolve({
                opt: fullOption, name
              })
            } else {
              reject()
            }
          } else {
            reject()
          }
        }).catch(err => {
          reject(err)
        })
      })
    },
    handleOption(list, option, mapper) {
      option.dataset = {
        dimensions: mapper.dimensions.split(','),
        source: list
      }
      return option
    }
  },
  beforeDestroy() {
    this.clearInstance()
  }

}
</script>
<style lang="scss" scoped>
.detail-view-container {

  .report-edit-wrap {
    width: 100%;
    height: 100%;
  }
}

</style>
